<template>
     <div id="addFill">
         <div class="jx-title-box">
            <div class="fl jx-blueStreak"></div>
            <div class="fl jx-titleText">学生信息</div>
            <div class="fr jx-titleText">
                <a href="" ><i></i>下载报告</a>
            </div>
        </div>
        <div class="jx-part">
            <div class="jx-part-left">
                 000000
            </div>
            <div class="jx-part-right">
               <div style="width: 100%;height:300px;" id="teaching"></div>
               <div class="set-detail ">
                   <router-link :to="{path:'/PowerDetail'}">
                       查看详情
                   </router-link>
               </div>
               <div class="set-weight">
                   <router-link :to="{path:'/Setweight'}">
                       <i class="iconfont icon-shezhi"></i>设置权重
                   </router-link>
                </div> 
            </div>
        </div>
        <div class="fr tips-right"><span>推荐岗位 </span> 数据采集工程师、大数据研发工程师</div> 
        <div class="colorBox">
            <div class='fl'>
                <i>■</i>
                <span>理论课学习</span>
            </div>
             <div class='fl'>
                <i>■</i>
                <span>理论课学习</span>
            </div>
             <div class='fl'>
                <i>■</i>
                <span>理论课学习</span>
            </div>
        </div>
        <div class="jx-content  part-content">
            <div class="teach-box">
                <el-row>
                    <el-col :span="6">
                      <h3>0</h3>
                      <p>阅读课件次数</p>
                    </el-col> 
                     <el-col :span="6">
                        <h3>20</h3>
                        <p>提交随堂练习次数</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>10</h3>
                        <p>作业提交率</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>30</h3>
                        <p>考试及格率</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>50</h3>
                        <p>随堂回答次数</p>
                        <div class="lines"></div>
                    </el-col> 
                </el-row>
            </div>
        </div>
        <div class="jx-content  part-content-second">
            <div class="teach-box">
                <el-row>
                    <el-col :span="6">
                      <h3>0</h3>
                      <p>阅读课件次数</p>
                    </el-col> 
                     <el-col :span="6">
                        <h3>0</h3>
                        <p>提交随堂练习次数</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>0</h3>
                        <p>作业提交率</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>0</h3>
                        <p>考试及格率</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>0</h3>
                        <p>随堂回答次数</p>
                        <div class="lines"></div>
                    </el-col> 
                </el-row>
            </div>
        </div>
        <div class="jx-content  part-content-three">
            <div class="teach-box">
                <el-row>
                    <el-col :span="6">
                      <h3>0</h3>
                      <p>阅读课件次数</p>
                    </el-col> 
                     <el-col :span="6">
                        <h3>0</h3>
                        <p>提交随堂练习次数</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>0</h3>
                        <p>作业提交率</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>0</h3>
                        <p>考试及格率</p>
                        <div class="lines"></div>
                    </el-col> 
                     <el-col :span="6">
                        <h3>0</h3>
                        <p>随堂回答次数</p>
                        <div class="lines"></div>
                    </el-col> 
                </el-row>
            </div>
        </div>
        <div class="jx-list">
             <div class="jx-title-box">
                <div class="fl jx-blueStreak"></div>
                <div class="fl jx-titleText">0000</div>
             </div>
              <div class="jx-content">
                   <div class="colorBox">
                        <div class='fl'>
                            <i>■</i>
                            <span>理论课学习</span>
                        </div>
                        <div class='fl'>
                            <i>■</i>
                            <span>理论课学习</span>
                        </div>
                        <div class='fl'>
                            <i>■</i>
                            <span>理论课学习</span>
                        </div>
                   </div>
                   <div class="teach-box">
                        <el-row>
                            <el-col :span="6">
                                <span class="col-num">00000</span>
                                <span class="col-text">阅读课件次数</span>
                            </el-col> 
                            <el-col :span="6">
                                <span class="col-num">00000</span>
                                 <span class="col-text">提交随堂练习次数</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num">00000</span>
                                 <span class="col-text">在线考试次数</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num">00000%</span>
                                 <span class="col-text">考试及格率</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num">00000</span>
                                 <span class="col-text">随堂回答</span>
                            </el-col>   
                        </el-row>
                        
                    </div>
                    <div class="teach-box">
                        <el-row>
                            <el-col :span="6">
                                <span class="col-num-color">00000</span>
                                <span class="col-text-color">实验次数</span>
                            </el-col> 
                            <el-col :span="6">
                                <span class="col-num-color">00000m</span>
                                 <span class="col-text-color">实验时长</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num-color">00000</span>
                                 <span class="col-text-color">提交实验报告数量</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num-color">00000</span>
                                 <span class="col-text-color">实验报告提交率</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num-color">00000</span>
                                 <span class="col-text-color">实验笔记数量</span>
                            </el-col>   
                        </el-row>
                        
                    </div>
                    <div class="teach-box">
                        <el-row>
                            <el-col :span="6">
                                <span class="col-num-pop">00000</span>
                                <span class="col-text-pop">进入课程次数</span>
                            </el-col> 
                            <el-col :span="6">
                                <span class="col-num-pop">00000</span>
                                 <span class="col-text-pop">提问问题数量</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num-pop">00000</span>
                                 <span class="col-text-pop">回答问题数量</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num-pop">00000</span>
                                 <span class="col-text-pop">出勤率</span>
                            </el-col> 
                           <el-col :span="6">
                                <span class="col-num-pop">00000</span>
                                 <span class="col-text-pop">缺勤次数</span>
                            </el-col>   
                        </el-row>
                        
                    </div>
              </div>
        </div>
        
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        data () {
            return {
                   
            }
        },
        mounted() {
            this.drawShape()
        },
        methods: {
            //雷达图
               drawShape(){
                  let self = this
                  self.chartColumn = echarts.init(document.getElementById('teaching'));
                  var options = {
                    tooltip : {
                            trigger: 'axis'
                    },
                    calculable : true,
                    color:['#71a7e2'], //此处是选中区域的颜色
                    
                    polar : [
                       {
                         center : ['50%','50%'],
                         radius : 100 ,//半径，可放大放小雷达图
                         indicator : [
                                    {text : '数据管理能力', max  : 100,color:'#333'},
                                    {text : '数据认知能力', max  : 100,color:'#333'},
                                    {text : '数据处理能力', max  : 100,color:'#333'},
                                    {text : '数据呈现能力', max  : 100,color:'#333'},
                                    {text : '数据分析挖掘能力', max  : 100,color:'#333'},
                        
                                  ],
                        axisLine: {            // 坐标轴线
                            show: true,       // 默认显示，属性show控制显示与否
                            lineStyle: {
                                width : 1,
                                color: '#d6d6d6' // 坐标轴刻度文字的样式
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: false
                        },
                        splitLine : {
                            show : true,
                            lineStyle : {
                                width : 1,
                                color : '#d6d6d6' // 图表背景网格线的颜色
                            }
                        },
                        splitArea : {
                            show : true,
                            areaStyle : {
                                color: ["#fff"]  // 图表背景网格的颜色
                            }
                        },

                    }
                ],
                    series : [
                            {
                               type: 'radar',
                                tooltip: {
                                    trigger: 'item'
                                },
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data : [
                                    {
                                    value:[30,85,80,28,58,60],
                                    name: '学生',
                                    label: {
                                        normal: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                             }
                                        }
                                     }
                                   },   
                                ]
                            }
                        ]
                 }    
                   this.chartColumn.setOption(options)  

                }
          
           
          },

        
    }
</script>

<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
 #addFill {
    width: $width;
    margin: 20px auto;
    color: #727272;
    .jx-title-box{
        color:$blue;
        line-height: 15px;
        text-align: left;
        height: 15px;
        font-size: $fs16;
        padding: 10px 0;
        .jx-blueStreak{
            background: $blue;
            width: 2px;
            float: left;
            height: 15px;
            padding: 0;
        }
        .jx-titleText{
            padding-left:40px;
            width: auto;
        }
    }
     .jx-part{
        box-sizing: border-box;
        overflow: hidden;
        .jx-part-left{
            float: left;
            width: 500px;
            background: #fff;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            padding: 20px 40px;
            height:260px;
            line-height: 30px;
              .el-row .el-col{
                text-align: center;
                width: 50%;
                border-right: solid 1px $border-gray;
                &:last-child{
                   border-right: none
                }
            }
            .col-num{
                display: block;
                color: #1277eb;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-text{
                color: $table-gray
            }
        }
        .jx-part-right{
            float: right;
            margin-left: 20px;
            width: 500px;
            background: #fff;
            padding: 10px;
            position: relative;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            padding: 20px 40px;
            line-height: 30px;
            height:260px;
              .set-weight{
                 position: absolute;
                 top:10px;
                 right: 30px;
              }
              .set-detail{
                   position: absolute;
                   display: inline-block;
                   bottom:20px;
                   right: 30px;
                    border: 1px solid #1277eb;
                    border-radius: 20px;
                    padding: 0 10px;
                    text-align: center;
                    vertical-align: middle;
                    line-height: 30px;
                 
              }
         }
    }
    .tips-right{
        margin: 20px 0;
        &>span{
           font-size: $fs16 
        }
    }
    .colorBox{
        clear: both;
        overflow: hidden;
         &>div{
             width: 120px;
         }
        &>div:nth-of-type(1) i{
          color: #58a8e8;
          font-size: $fs18
        }
         &>div:nth-of-type(2) i{
          color: #42bbab;
          font-size: $fs18
        }
         &>div:nth-of-type(3) i{
          color: #7c87c2;
          font-size: $fs18
        }
    }
    .part-content{
        padding: 0;
        clear: both;
        margin-top: 30px;
         .teach-box{
            .el-row .el-col{
                width: 20%;
                height: 80px;
                padding: 16px 0;
                line-height: 40px;
                color: #fff;
                &>h3{
                    padding: 6px 80px 0 16px;
                }
                 &>p{
                    padding: 6px 80px 0 16px;
                }
                .lines{
                    position: absolute;
                    top: 10px;
                    height: 60px;
                    width: 1px;
                    background: #fff;
                    z-index: 9999;
                }
                &:last-child{
                   border-right: none
                }
                &:nth-of-type(1){
                    color: #fff;
                    background:#58a8e8 url(../../../assets/images/ico_read1.png) no-repeat right 30px center;
                }
                 &:nth-of-type(2){
                    color: #fff;
                    background:#58a8e8 url(../../../assets/images/ico_read2.png) no-repeat right 30px center;
                }
                 &:nth-of-type(3){
                    color: #fff;
                    background:#58a8e8 url(../../../assets/images/ico_read3.png) no-repeat right 30px center;
                }
                &:nth-of-type(4){
                    color: #fff;
                    background:#58a8e8 url(../../../assets/images/ico_read4.png) no-repeat right 30px center;
                }
                &:nth-of-type(5){
                    color: #fff;
                    background:#58a8e8 url(../../../assets/images/ico_read5.png) no-repeat right 30px center;
                }
                &:nth-of-type(1):hover{
                    color: #58a8e8;
                    background:#fff url(../../../assets/images/ico_read1s.png) no-repeat right 30px center;
                }
                &:nth-of-type(2):hover{
                    color: #58a8e8;
                    background:#fff url(../../../assets/images/ico_read2s.png) no-repeat right 30px center;
                }
                &:nth-of-type(3):hover{
                    color: #58a8e8;
                    background:#fff url(../../../assets/images/ico_read3s.png) no-repeat right 30px center;
                }
                 &:nth-of-type(4):hover{
                    color: #58a8e8;
                    background:#fff url(../../../assets/images/ico_read4s.png) no-repeat right 30px center;
                }
                 &:nth-of-type(5):hover{
                    color: #58a8e8;
                    background:#fff url(../../../assets/images/ico_read5s.png) no-repeat right 30px center;
                }
            }
            .col-num{
                display: block;
                color: #fff;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-text{
                color: $table-gray
            }
        }
    }
     .part-content-second{
        background: #42bbab;
        padding: 0;
        clear: both;
        margin-top: 30px;
         .teach-box{
            .el-row .el-col{
                width: 20%;
                height: 80px;
                padding: 10px 0;
                line-height: 40px;
                color: #fff;
                &>h3{
                    padding: 6px 80px 0 16px;
                }
                 &>p{
                    padding: 6px 80px 0 16px;
                }
                .lines{
                    position: absolute;
                    top: 10px;
                    height: 60px;
                    width: 1px;
                    background: #fff;
                    z-index: 9999;
                }
                &:last-child{
                   border-right: none
                }
                &:nth-of-type(1){
                    color: #fff;
                    background:#42bbab url(../../../assets/images/ico_read6.png) no-repeat right 30px center;
                }
                 &:nth-of-type(2){
                    color: #fff;
                    background:#42bbab url(../../../assets/images/ico_read7.png) no-repeat right 30px center;
                }
                &:nth-of-type(3){
                    color: #fff;
                    background:#42bbab url(../../../assets/images/ico_read8.png) no-repeat right 30px center;
                }
                 &:nth-of-type(4){
                    color: #fff;
                    background:#42bbab url(../../../assets/images/ico_read9.png) no-repeat right 30px center;
                }
                &:nth-of-type(5){
                    color: #fff;
                    background:#42bbab url(../../../assets/images/ico_read10.png) no-repeat right 30px center;
                }
                &:nth-of-type(1):hover{
                    color: #42bbab;
                    background:#fff url(../../../assets/images/ico_read6s.png) no-repeat right 30px center;
                }
                 &:nth-of-type(2):hover{
                    color: #42bbab;
                    background:#fff url(../../../assets/images/ico_read7s.png) no-repeat right 30px center;
                }
                &:nth-of-type(3):hover{
                    color: #42bbab;
                    background:#fff url(../../../assets/images/ico_read8s.png) no-repeat right 30px center;
                }
                &:nth-of-type(4):hover{
                    color: #42bbab;
                    background:#fff url(../../../assets/images/ico_read9s.png) no-repeat right 30px center;
                }
                &:nth-of-type(5):hover{
                    color: #42bbab;
                    background:#fff url(../../../assets/images/ico_read10s.png) no-repeat right 30px center;
                }
            }
            .col-num{
                display: block;
                color: #fff;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-text{
                color: $table-gray
            }
        }
    }
     .part-content-three{
        background: #7c87c2;
        padding: 0;
        clear: both;
        margin-top: 30px;
         .teach-box{
            .el-row .el-col{
                width: 20%;
                height: 80px;
                padding: 10px 0;
                line-height: 40px;
                color: #fff;
                &>h3{
                    padding: 6px 80px 0 16px;
                }
                 &>p{
                    padding: 6px 80px 0 16px;
                }
                .lines{
                    position: absolute;
                    top: 10px;
                    height: 60px;
                    width: 1px;
                    background: #fff;
                    z-index: 9999;
                }
                &:last-child{
                   border-right: none
                }
                &:nth-of-type(1){
                    color: #fff;
                    background:#7c87c2 url(../../../assets/images/ico_read11.png) no-repeat right 30px center;
                }
                &:nth-of-type(2){
                    color: #fff;
                    background:#7c87c2 url(../../../assets/images/ico_read12.png) no-repeat right 30px center;
                }
                 &:nth-of-type(3){
                    color: #fff;
                    background:#7c87c2 url(../../../assets/images/ico_read13.png) no-repeat right 30px center;
                }
                 &:nth-of-type(4){
                    color: #fff;
                    background:#7c87c2 url(../../../assets/images/ico_read14.png) no-repeat right 30px center;
                }
                 &:nth-of-type(5){
                    color: #fff;
                    background:#7c87c2 url(../../../assets/images/ico_read15.png) no-repeat right 30px center;
                }
                &:nth-of-type(1):hover{
                    color: #7c87c2;
                    background:#fff url(../../../assets/images/ico_read11s.png) no-repeat right 30px center;
                }
                &:nth-of-type(2):hover{
                    color: #7c87c2;
                    background:#fff url(../../../assets/images/ico_read12s.png) no-repeat right 30px center;
                }
                &:nth-of-type(3):hover{
                    color: #7c87c2;
                    background:#fff url(../../../assets/images/ico_read13s.png) no-repeat right 30px center;
                }
                &:nth-of-type(4):hover{
                    color: #7c87c2;
                    background:#fff url(../../../assets/images/ico_read14s.png) no-repeat right 30px center;
                }
                &:nth-of-type(5):hover{
                    color: #7c87c2;
                    background:#fff url(../../../assets/images/ico_read15s.png) no-repeat right 30px center;
                }
            }
            .col-num{
                display: block;
                color: #fff;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-text{
                color: $table-gray
            }
        }
    }
    .jx-list{
        .jx-content{
            .teach-box{
            padding:30px 30px 0px 30px;
            .el-row .el-col{
                text-align: center;
                width: 20%;
                border-right: solid 1px $border-gray;
                &:last-child{
                   border-right: none
                }
            }
            .col-num{
                display: block;
                color: #1277eb;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-num-color{
                display: block;
                color: #42bbab;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
             .col-num-pop{
                color: #7c87c2;
                display: block;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-text{
                color: $table-gray
            }
            .col-text-color{
                color: #42bbab;  
            }
            .col-text-pop{
                color: #7c87c2;
            }
         }

        }
          
    }
 }
</style>
